<template>
  <view class="date-picker">
    <view class="nav-btn" @click="changeMonth(-1)">
      <uni-icons type="arrowleft" size="24" color="#2775b6"></uni-icons>
    </view>
    
    <view class="month-display" @click="showPicker = true">
      <text>{{ displayMonth }}</text>
      <uni-icons type="arrowdown" size="16" color="#2775b6"></uni-icons>
    </view>
    
    <view class="nav-btn" @click="changeMonth(1)">
      <uni-icons type="arrowright" size="24" color="#2775b6"></uni-icons>
    </view>

    <!-- 原生日期选择器 -->
    <picker 
      mode="date" 
      fields="month"
      :value="currentDate"
      @change="handleDateChange"
      v-if="showPicker"
      class="date-picker-native"
    />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useHomeStore } from '@/stores/homeStore'

const homeStore = useHomeStore()
const showPicker = ref(false)

const currentDate = computed(() => {
  return homeStore.selectedDate || new Date().toISOString().split('T')[0]
})

const displayMonth = computed(() => {
  const date = new Date(currentDate.value)
  return `${date.getFullYear()}年${date.getMonth() + 1}月`
})

const changeMonth = (delta) => {
  const date = new Date(currentDate.value)
  date.setMonth(date.getMonth() + delta)
  updateSelectedDate(date)
}

const handleDateChange = (e) => {
  showPicker.value = false
  updateSelectedDate(new Date(e.detail.value))
}

const updateSelectedDate = (date) => {
  const dateStr = date.toISOString().split('T')[0]
  homeStore.setSelectedDate(dateStr)
}
</script>

<style scoped>
.date-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: white;
  border-radius: 12px;
  margin: 0 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-btn {
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.nav-btn:active {
  background-color: rgba(135, 206, 235, 0.2);
}

.month-display {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #2775b6;
  padding: 4px 12px;
  border-radius: 8px;
}

.month-display:active {
  background-color: rgba(135, 206, 235, 0.2);
}

.date-picker-native {
  position: absolute;
  left: -9999px;
  opacity: 0;
}
</style>